
<!--// 멀티스킨 사용을 위해 변수 또는 ID 랜덤 지정 -->
{@$skin_id = "Pwall".mt_rand()}
{@$slider_id = $skin_id}

{@$skincssimgpath = getSiteUrl()."widgets/contentslider/skins/Photowall/images"}

<style type="text/css">
*{
    margin:0;
    padding:0;
}
#{$skin_id} {
    background-color:#fff;
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    overflow:hidden;
	clear: both;
	float: left;
	display:block;
	width: {$widget_info->slider_img_width+2}px;
	height: {$widget_info->slider_img_height+30}px;
}
#{$skin_id} #Photowallloading{
    display:none;
	position: absolute;
	z-index:11;
	background-image: url('{$skincssimgpath}/loader.gif');
	background-repeat: no-repeat;
	background-position: center center;
	width: {$widget_info->slider_img_width+2}px;
	height: {$widget_info->slider_img_height+30}px;
}
.infobar{
    background-color:#000;
    height:28px;
    line-height:28px;
    right:0px;
    position:relative;
    bottom:0px;
    left:0px;
    text-align:center;
    color:#ddd;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
	-moz-border-radius:10px 10px 0px 0px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-shadow:0px 0px 1px #ccc;
}
span#Photowalldescription{
    font-weight: bold;
    display:none;
}

#thumbsWrapper{
    overflow:hidden;
    position:relative;
    height:100%;
    width:100%;
    left:0px;
    right:0px;
    bottom:0px;
}
#Photowallcontent{
   position:relative;
   top:0px;
   height:100%;
   width:100%;
   left:0px;
   background-color:#fff;
   overflow-y: auto;
   display:none;  
}
#Photowallcontent img{
    float:left;
    margin:2px;
    cursor:pointer;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.placeholder{
    float:left;
    clear:both;
    width:100%;
    height:30px;
}
#Photowallpanel{
    background-color:#fff;
    width:100%;
    position:relative;
    bottom:0px;
    left:0px;
    right:0px;
    height:0px;
    text-align:center; 
}
#Photowallpanel img{
    cursor:pointer;
    position:relative;
    border:1px solid #000;
    -moz-box-shadow:0px 0px 10px #111;
    -webkit-box-shadow:0px 0px 10px #111;
    box-shadow:0px 0px 10px #111;
    display:none;
}

#Photowallwrapper{
    position:relative;
    margin:0px auto 0px auto;
	width: {$widget_info->slider_img_width+2}px;
	height: {$widget_info->slider_img_height}px;
}
a#pw_next,
a#pw_prev{
    width:40px;
    height:40px;
    position:absolute;
    cursor:pointer;
    outline:none;
    display:block;
	z-index:11;
    background:#aaa url('{$skincssimgpath}/nav.png') no-repeat top left;
}
a#pw_next:hover, a#pw_prev:hover{
    background-color:#fff;
}
a#pw_next{
    right:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px 0px;
}
a#pw_prev{
    left:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px -40px;
}
</style>

<!--@if($widget_info->content_items_shuffle=='Y')-->
	{@shuffle($content_items)}
<!--@end-->
<div id="{$skin_id}">
	<div id="Photowallloading"></div>
	<div class="infobar">
		<span id="Photowalldescription"></span>
		<span class="Photowallreference"></span>
	</div>
	<div id="thumbsWrapper">
		<div id="Photowallcontent" >
			<!--@foreach($content_items as $key => $item)-->
			<!--@if($item->getThumbnail())-->
			<img src="{$item->getThumbnail()}" alt="{$item->getImgslider()}" title='{$item->getTitle($widget_info->subject_cut_size)}' />
			<!--@end-->
			<!--@end-->
			<div class="placeholder"></div>
		</div>
	</div>
	<div id="Photowallpanel">
		<div id="Photowallwrapper">
			<a id="pw_prev"></a>
			<a id="pw_next"></a>
		</div>
	</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
$(function() {
	/* this is the index of the last clicked picture */
	var current = -1;
	/* number of pictures */
	var totalpictures = $('#Photowallcontent img').size();
	/* speed to animate the panel and the thumbs wrapper */
	var speed 	= 500;
	/* show the content */
	$('#Photowallcontent').show();
	/*
	when the user resizes the browser window,
	the size of the picture being viewed is recalculated;
	*/
	$(window).bind('resize', function() {
		var $picture = $('#Photowallwrapper').find('img');
		resize($picture);
	});
	/*
	when hovering a thumb, animate it's opacity
	for a cool effect;
	when clicking on it, we load the corresponding large image;
	the source of the large image is stored as 
	the "alt" attribute of the thumb image
	*/
	$('#Photowallcontent > img').hover(function () {
		var $this   = $(this);
		$this.stop().animate({
			'opacity':'1.0'
		},200);},function(){
			var $this   = $(this);
			$this.stop().animate({
				'opacity':'0.8'
			},200);}).bind('click',function(){
				var $this   = $(this);
				/* shows the loading icon */
				$('#Photowallloading').show();
				$('<img/>').load(function(){
				$('#Photowallloading').hide();
				if($('#Photowallwrapper').find('img').length) return;
				current 	= $this.index();
				var $theImage   = $(this);
				/*
				After it's loaded we hide the loading icon
				and resize the image, given the window size;
				then we append the image to the wrapper
				*/
				resize($theImage);
				$('#Photowallwrapper').append($theImage);
				/* make its opacity animate */
				$theImage.fadeIn(800);
				/* and finally slide up the panel */
				$('#Photowallpanel').animate({
					'height':'100%'
				},speed,function(){
					/*
					if the picture has a description,
					it's stored in the title attribute of the thumb;
					show it if it's not empty
					*/
					var title = $this.attr('title');
					if(title != '') $('#Photowalldescription').html(title).show();
					else $('#Photowalldescription').empty().hide();
					/*
					if our picture is the first one,
					don't show the "previous button"
					for the slideshow navigation;
					if our picture is the last one,
					don't show the "next button"
					for the slideshow navigation
					*/
					if(current==0) $('#pw_prev').hide();
					else $('#pw_prev').fadeIn();
					if(current==parseInt(totalpictures-1)) $('#pw_next').hide();
					else $('#pw_next').fadeIn();
					/*
					we set the z-index and height of the thumbs wrapper 
					to 0, because we want to slide it up afterwards,
					when the user clicks the large image
					*/
					$('#thumbsWrapper').css({
						'z-index':'0',
						'height':'0px'
					});
				});
			}).attr('src', $this.attr('alt'));
		});

		/*
		when hovering a large image,
		we want to slide up the thumbs wrapper again,
		and reset the panel (like it was initially);
		this includes removing the large image element
		*/
		$('#Photowallwrapper > img').live('click',function(){
			$this = $(this);
			$('#Photowalldescription').empty().hide();
			$('#thumbsWrapper').css('z-index','10').stop().animate({
				'height':'100%'
			},speed,function(){
				var $theWrapper = $(this);
				$('#Photowallpanel').css('height','0px');
				$theWrapper.css('z-index','0');
				/* 
				remove the large image element
				and the navigation buttons
				*/
				$this.remove();
				$('#pw_prev').hide();
				$('#pw_next').hide();
			});
		});
		/*
		when we are viewing a large image,
		if we navigate to the right/left we need to know
		which image is the corresponding neighbour.
		we know the index of the current picture (current),
		so we can easily get to the neighbour:
		*/
		$('#pw_next').bind('click',function(){
			var $this           = $(this);
			var $nextimage 		= $('#Photowallcontent img:nth-child('+parseInt(current+2)+')');
			navigate($nextimage,'right');
		});
		$('#pw_prev').bind('click',function(){
			var $this           = $(this);
			var $previmage 		= $('#Photowallcontent img:nth-child('+parseInt(current)+')');
			navigate($previmage,'left');
		});
		/*
		given the next or previous image to show,
		and the direction, it loads a new image in the panel.
		*/
		function navigate($nextimage,dir){
		/*
		if we are at the end/beginning
		then there's no next/previous
		*/
		if(dir=='left' && current==0) return;
		if(dir=='right' && current==parseInt(totalpictures-1)) return;
		$('#Photowallloading').show();
		$('<img/>').load(function(){
			var $theImage = $(this);
			$('#Photowallloading').hide();
			$('#Photowalldescription').empty().fadeOut();
			$('#Photowallwrapper img').stop().fadeOut(500,function(){
				var $this = $(this);
				$this.remove();
				resize($theImage);
				$('#Photowallwrapper').append($theImage.show());
				$theImage.stop().fadeIn(800);
				var title = $nextimage.attr('title');
				if(title != ''){
					$('#Photowalldescription').html(title).show();
				} else $('#Photowalldescription').empty().hide();
				if(current==0) $('#pw_prev').hide();
				else $('#pw_prev').show();
				if(current==parseInt(totalpictures-1)) $('#pw_next').hide();
				else $('#pw_next').show();
			});
			/*
			increase or decrease the current variable
			*/
			if(dir=='right') ++current;
			else if(dir=='left') --current;
		}).attr('src', $nextimage.attr('alt'));
	}

	/*
	resizes an image given the window size,
	considering the margin values
	*/
	function resize($image){
		var windowH      = $(window).height()-100;
		var windowW      = $(window).width()-80;
		var theImage     = new Image();
		theImage.src     = $image.attr("src");
		var imgwidth     = theImage.width;
		var imgheight    = theImage.height;
		if((imgwidth > windowW)||(imgheight > windowH)){
			if(imgwidth > imgheight){
				var newwidth = windowW;
				var ratio = imgwidth / windowW;
				var newheight = imgheight / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newheight>windowH){
					var newnewheight = windowH;
					var newratio = newheight/windowH;
					var newnewwidth =newwidth/newratio;
					theImage.width = newnewwidth;
					theImage.height= newnewheight;
				}
			} else{
				var newheight = windowH;
				var ratio = imgheight / windowH;
				var newwidth = imgwidth / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newwidth>windowW){
					var newnewwidth = windowW;
					var newratio = newwidth/windowW;
					var newnewheight =newheight/newratio;
					theImage.height = newnewheight;
					theImage.width= newnewwidth;
				}
			}
		}
		$image.css({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
		});
	}
});
});
</script>